<template>
    <div class="base-button">
        <div
            :class="[
                size === BaseButtonSize.LARGE ? 'base-button-content-large' : '',
                `base-button-style${type ? '-' + type : ''}`,
            ]"
            :style="custStyle"
            class="base-button-content"
        >
            <BaseIcon v-if="iconName" :name="iconName" :size="iconSize || (size === BaseButtonSize.LARGE ? 22 : 16)" />
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseButton
 * @Description 按钮
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
enum BaseButtonSize {
    LARGE = 'large',
}

interface BaseButtonProps {
    iconName?: string
    iconSize?: number
    size?: 'large' | ''
    type?: 'primary' | ''
    custStyle?: AnyObject
}

defineProps<BaseButtonProps>()
</script>

<style lang="scss" scoped>
.base-button {
    display: flex;
    justify-content: center;
    align-items: center;

    .base-button-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
        border-radius: 4px;
        padding: 4px 16px;
        color: var(--base-text-color);
        font-size: 14px;
        line-height: normal;

        // 大按钮
        &.base-button-content-large {
            padding: 0;
            width: 103px;
            height: 44px;
            font-size: 16px;
            line-height: 44px;
        }

        // 鼠标移入
        &:hover {
            cursor: pointer;
            background: var(--base-color-hover);
            color: var(--base-text-color-hover);
        }
    }

    // 激活
    .base-button-style-primary {
        background: var(--base-primary-color);
        color: var(--base-text-primary-color);

        &:hover {
            opacity: 0.8;
            background: var(--base-primary-color);
            color: var(--base-text-primary-color);
        }
    }
}
</style>
